<form class="layui-form" onsubmit="return false;">
    <input type="hidden" name="id" value="#(bean.id??)">
    <div class="layui-card">
        <div class="layui-card-body">
            <ul class="layui-timeline">
                <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis layui-icon-circle"></i>
                    <div class="layui-timeline-content layui-text">
                        <h3 class="layui-timeline-title">基本信息</h3>
                        <p>
                            <div class="layui-form-item layui-inline">
                                <label class="layui-form-label required">上级部门</label>
                                <div class="layui-input-inline">
                                    <ul id="parent" class="dtree" data-id="0" data-value="#(bean.deptId??)"></ul>
                                </div>
                                <label class="layui-form-label required">状态</label>
                                <div class="layui-input-inline">
                                    <input type="radio" name="status" value="ON" title="启用" #if(bean.status?? == 'ON' || bean.status?? == null) checked #end>
                                    <input type="radio" name="status" value="OFF" title="禁用" #if(bean.status?? == 'OFF') checked #end>
                                </div>
                            </div>
                            <div class="layui-form-item layui-inline">
                                <label class="layui-form-label#if(!bean.id??) required#end">登录账号</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="account" value="#(bean.account??)" lay-verify="required" autocomplete="off" placeholder="用于登录" class="layui-input"#if(bean.id??) disabled#end>
                                </div>
                                #if(!bean.id)
                                <label class="layui-form-label required">登录密码</label>
                                <div class="layui-input-inline">
                                    <input type="password" name="password" value="#(bean.password??)" lay-verify="required" autocomplete="off" class="layui-input">
                                </div>
                                #end
                            </div>
                            <div class="layui-form-item layui-inline">
                                <label class="layui-form-label required">用户昵称</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="nickname" value="#(bean.nickname??)" lay-verify="required" autocomplete="off" placeholder="用于显示" class="layui-input">
                                </div>
                                <label class="layui-form-label required">用户性别</label>
                                <div class="layui-input-inline">
                                    <select name="gender" lay-verify="required">
                                        <option value="">-- 请选择 --</option>
                                    #DICTS(type="user_gender")#for(item : dicts)
                                        <option value="#(item.value)"#if(item.value == bean.gender??) selected#end>#(item.label)</option>
                                    #end#end
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item layui-inline">
                                <label class="layui-form-label">手机号码</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="phone" value="#(bean.phone??)" lay-verify="" autocomplete="off" placeholder="请输入手机号码" class="layui-input">
                                </div>
                                <label class="layui-form-label">电子邮箱</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="email" value="#(bean.email??)" lay-verify="" autocomplete="off" placeholder="请输入电子邮箱" class="layui-input">
                                </div>
                            </div>
                        </p>
                    </div>
                </li>
                <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis layui-icon-circle"></i>
                    <div class="layui-timeline-content layui-text">
                    <h3 class="layui-timeline-title">其它信息</h3>
                        <p>
                            <div class="layui-form-item layui-block">
                                <label class="layui-form-label">备注</label>
                                <div class="layui-input-block">
                                    <textarea name="remark" style="min-height: 20px;" autocomplete="off" placeholder="请输入备注内容" class="layui-textarea">#(bean.remark??)</textarea>
                                </div>
                            </div>
                        </p>
                    </div>
                </li>
                <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis layui-icon-circle"></i>
                    <div class="layui-timeline-content layui-text">
                        <h3 class="layui-timeline-title">角色信息</h3>
                        <p>
                            <div class="layui-form-item layui-block">
                                <input type="hidden" name="roleIds">
                                <div class="layui-input-block">
                                	<div id="beans-transfer"></div>
                                </div>
                            </div>
                        </p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-form-item" style="display: none;">
        <div class="layui-input-block">
            <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit="" lay-filter="data-save" id="data-save" onclick="window.checkRoles();">
                <i class="layui-icon layui-icon-ok"></i> 提交
            </button>
        </div>
    </div>
</form>
#include("/admin/_common/foot.html")
<script type="text/javascript">
layui.use(['jquery', 'form', 'dtree', 'transfer'], function() {
    var $ = layui.jquery;
    var form = layui.form;
    var transfer = layui.transfer;
    var dtree = layui.dtree;
    
    /*
     * 刷新上级部门树
     */
    dtree.renderSelect({
        elem: "#parent", // 树绑定的元素ID
        initLevel: "2", // 默认展开层级
        url: "#CTX()/admin/system/dept/dtree", // 异步数据接口
        method: 'get', // 异步请求方法
        line: true, // 开启树线
        none: "无数据...", // 初始化未加载节点时的提示文字
        ficon: ["-1", "-1"], // 一级图标非叶子节点：0：文件夹，1：方形加减，2：三角形，-1：不显示一级图标非叶子节点。一级图标叶子节点：0：文件夹，1：人员，2：机构，3：报表，4：信息，5：叶子，6：勋章，7：文件，8：小圆点，9：齿轮，10：星星， -1：不显示一级图标叶子节点
        icon: ["1","8"], // 二级图标非叶子节点：0：文件夹，1：方形加减，2：三角形，-1：不显示二级图标非叶子节点。二级图标叶子节点：0：文件夹，1：人员，2：机构，3：报表，4：信息，5：叶子，6：勋章，7：文件，8：小圆点，9：齿轮，10：星星， -1：不显示二级图标叶子节点
        selectInputName: {nodeId: "deptId"} // 用于Form表单提交的字段名
    });
    
    
    /*
     * 渲染角色
     */
    window.renderTransfer = () => {
    	transfer.render({
    	    elem: '#beans-transfer',
    	    id: 'beans-transfer-1',
    	    data: window.getRoles(),
    	    title: ['备选角色', '已选角色'],
    	    value: window.getSelectedIds(),
    	    parseData: (res) => {
    	    	return {
    	            "value": res.id, // 数据值
    	            "title": res.name, // 数据标题
    	            "disabled": res.disabled,  // 是否禁用
    	            "checked": res.checked // 是否选中
   	            }
    	    }
   	    });
    };
    
    window.getRoles = () => {
    	var data = [];
        $.ajax({
            url: "#CTX()/admin/system/role/queryList",    //后台数据请求地址
            type: "post",
            data: {"status": "ON"},
            async: false,
            success: function(result){
            	data = result;
            }
        });
        return data;
    };
    
    window.getSelectedIds = () => {
    	var data = [];
        $.ajax({
            url: "#CTX()/admin/system/role/queryByUser?userId=#(bean.id??)",    //后台数据请求地址
            type: "get",
            async: false,
            success: function(result){
            	for(var i = 0; i < result.length; i++){
            		data.push(result[i].id);
            	}
            }
        });
        return data;
    };
    
    window.renderTransfer();
    
    window.checkRoles = function() {
        var ids = [];
        var result = transfer.getData('beans-transfer-1');
        for(var i = 0; i < result.length; i++){
        	ids.push(result[i].value);
        }
        $("[name='roleIds']").val(ids.join());
    }
    
});
</script>
